<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .success { color: green; }
        .error { color: red; }
        .info { color: blue; }
    </style>
</head>
<body>
    <h1>博客列表简单测试</h1>
    
    <div id="status">准备测试...</div>
    
    <button onclick="runTest()">运行测试</button>
    
    <div id="results"></div>
    
    <script>
        async function runTest() {
            const status = document.getElementById('status');
            const results = document.getElementById('results');
            
            status.innerHTML = '<span class="info">正在测试...</span>';
            results.innerHTML = '';
            
            try {
                // 测试1: 加载JSON文件
                status.innerHTML = '<span class="info">测试1: 加载JSON文件...</span>';
                const response = await fetch('../../frontend/AiBlog/Blogs.json');
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                
                const data = await response.json();
                const blogs = data.blogs || [];
                
                addResult('✓ 成功加载JSON文件', `找到 ${blogs.length} 篇博客`);
                
                if (blogs.length === 0) {
                    addResult('✗ 没有找到博客数据', '');
                    return;
                }
                
                // 测试2: 检查数据结构
                status.innerHTML = '<span class="info">测试2: 检查数据结构...</span>';
                const firstBlog = blogs[0];
                const requiredFields = ['id', 'title', 'summary', 'contentFile', 'category', 'tags', 'author', 'authorTitle', 'publishDate'];
                
                const missingFields = requiredFields.filter(field => !(field in firstBlog));
                if (missingFields.length === 0) {
                    addResult('✓ 数据结构完整', '所有必需字段都存在');
                } else {
                    addResult('✗ 数据结构不完整', `缺少字段: ${missingFields.join(', ')}`);
                }
                
                // 测试3: 生成表格行
                status.innerHTML = '<span class="info">测试3: 生成表格行...</span>';
                const tableRow = generateTableRow(firstBlog);
                addResult('✓ 表格行生成成功', `生成了 ${tableRow.split('<td').length - 1} 个单元格`);
                
                // 测试4: 显示表格
                status.innerHTML = '<span class="info">测试4: 显示表格...</span>';
                displayTable(blogs.slice(0, 3)); // 只显示前3篇
                addResult('✓ 表格显示成功', '');
                
                status.innerHTML = '<span class="success">所有测试完成！</span>';
                
            } catch (error) {
                status.innerHTML = '<span class="error">测试失败</span>';
                addResult('✗ 测试失败', error.message);
                console.error('Test error:', error);
            }
        }
        
        function generateTableRow(blog) {
            const publishDate = blog.publishDate || '未设置';
            const tags = blog.tags ? blog.tags.join(', ') : '无标签';
            
            return `
                <tr>
                    <td>${blog.id}</td>
                    <td>${blog.title}</td>
                    <td>${blog.summary || '暂无摘要'}</td>
                    <td>${blog.contentFile || '未设置'}</td>
                    <td>${blog.category || '未分类'}</td>
                    <td>${tags}</td>
                    <td>${blog.author || '未知'}</td>
                    <td>${blog.authorTitle || '未设置'}</td>
                    <td>${publishDate}</td>
                    <td>
                        <button onclick="alert('查看博客: ${blog.id}')">查看</button>
                        <button onclick="alert('编辑博客: ${blog.id}')">编辑</button>
                        <button onclick="alert('删除博客: ${blog.id}')">删除</button>
                    </td>
                </tr>
            `;
        }
        
        function displayTable(blogs) {
            const results = document.getElementById('results');
            
            const tableHTML = `
                <h3>博客列表表格</h3>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>摘要</th>
                            <th>内容文件</th>
                            <th>分类</th>
                            <th>标签</th>
                            <th>作者</th>
                            <th>作者职称</th>
                            <th>发布日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${blogs.map(blog => generateTableRow(blog)).join('')}
                    </tbody>
                </table>
            `;
            
            results.innerHTML += tableHTML;
        }
        
        function addResult(title, message) {
            const results = document.getElementById('results');
            const div = document.createElement('div');
            div.innerHTML = `<strong>${title}</strong>: ${message}`;
            div.style.marginBottom = '10px';
            results.appendChild(div);
        }
    </script>
</body>
</html>


